<template>
  <div class="app-container">
    <a-form
      :model="queryParams"
      ref="queryRef"
      layout="inline"
      v-show="showSearch"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
    >
      <a-form-item label="数据库字段/表单字段" name="field">
        <a-input
          v-model:value="queryParams.field"
          placeholder="请输入数据库字段/表单字段"
          allowClear
          @pressEnter="handleQuery"
        />
      </a-form-item>
      <a-form-item label="字段名/表单字段名" name="label">
        <a-input
          v-model:value="queryParams.label"
          placeholder="请输入字段名/表单字段名"
          allowClear
          @pressEnter="handleQuery"
        />
      </a-form-item>
      <a-form-item label="字段宽度" name="width">
        <a-input
          v-model:value="queryParams.width"
          placeholder="请输入字段宽度"
          allowClear
          @pressEnter="handleQuery"
        />
      </a-form-item>
      <a-form-item label="字段范围" name="scope">
        <a-input
          v-model:value="queryParams.scope"
          placeholder="请输入字段范围"
          allowClear
          @pressEnter="handleQuery"
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="handleQuery">
          <template #icon><SearchOutlined /></template>
          搜索
        </a-button>
        <a-button @click="resetQuery">
          <template #icon><ReloadOutlined /></template>
          重置
        </a-button>
      </a-form-item>
    </a-form>

    <a-row :gutter="10" class="mb8">
      <a-col :span="1.5">
        <a-button
          type="primary"
          @click="handleAdd"
          v-hasPermi="['flowable:def:add']"
        >
          <template #icon><PlusOutlined /></template>
          新增
        </a-button>
      </a-col>
      <a-col :span="1.5">
        <a-button
          type="primary"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['flowable:def:edit']"
        >
          <template #icon><EditOutlined /></template>
          修改
        </a-button>
      </a-col>
      <a-col :span="1.5">
        <a-button
          type="primary"
          danger
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['flowable:def:remove']"
        >
          <template #icon><DeleteOutlined /></template>
          删除
        </a-button>
      </a-col>
      <a-col :span="1.5">
        <a-button
          type="primary"
          @click="handleExport"
          v-hasPermi="['flowable:def:export']"
        >
          <template #icon><DownloadOutlined /></template>
          导出
        </a-button>
      </a-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </a-row>

    <a-table
      v-loading="loading"
      :dataSource="defList"
      :rowSelection="{ selectedRowKeys: ids, onChange: handleSelectionChange }"
    >
      <a-table-column title="主键ID" dataIndex="id" align="center" />
      <a-table-column title="数据库字段/表单字段" dataIndex="field" align="center" />
      <a-table-column title="字段名/表单字段名" dataIndex="label" align="center" />
      <a-table-column title="字段说明" dataIndex="remark" align="center" />
      <a-table-column title="字段宽度" dataIndex="width" align="center" />
      <a-table-column title="字段组件类型" dataIndex="type" align="center" />
      <a-table-column title="字段定义" dataIndex="scheme" align="center" />
      <a-table-column title="字段范围" dataIndex="scope" align="center" />
      <a-table-column title="操作" align="center" width="180">
        <template #default="{ record }">
          <a-space>
            <a-button
              type="link"
              @click="handleUpdate(record)"
              v-hasPermi="['flowable:def:edit']"
            >
              <template #icon><EditOutlined /></template>
              修改
            </a-button>
            <a-button
              type="link"
              @click="handleDelete(record)"
              v-hasPermi="['flowable:def:remove']"
            >
              <template #icon><DeleteOutlined /></template>
              删除
            </a-button>
          </a-space>
        </template>
      </a-table-column>
    </a-table>
    
    <a-pagination
      v-show="total > 0"
      :total="total"
      v-model:current="queryParams.pageNum"
      v-model:pageSize="queryParams.pageSize"
      @change="getList"
    />

    <!-- 添加或修改流程字段定义对话框 -->
    <a-modal
      :title="title"
      v-model:open="open"
      width="500px"
      @ok="submitForm"
      @cancel="cancel"
    >
      <a-form
        ref="defRef"
        :model="form"
        :rules="rules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
      >
        <a-form-item label="数据库字段/表单字段" name="field">
          <a-input v-model:value="form.field" placeholder="请输入数据库字段/表单字段" />
        </a-form-item>
        <a-form-item label="字段名/表单字段名" name="label">
          <a-input v-model:value="form.label" placeholder="请输入字段名/表单字段名" />
        </a-form-item>
        <a-form-item label="字段说明" name="remark">
          <a-input v-model:value="form.remark" placeholder="请输入字段说明" />
        </a-form-item>
        <a-form-item label="字段宽度" name="width">
          <a-input v-model:value="form.width" placeholder="请输入字段宽度" />
        </a-form-item>
        <a-form-item label="字段范围" name="scope">
          <a-input v-model:value="form.scope" placeholder="请输入字段范围" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup name="Def">
import { getCurrentInstance, ref, reactive, toRefs } from "vue";
import { message, Modal } from 'ant-design-vue';
import {
  SearchOutlined,
  ReloadOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  DownloadOutlined
} from '@ant-design/icons-vue';
import { listDef, getDef, delDef, addDef, updateDef } from "/@/api/business/flowable/def";

const { proxy } = getCurrentInstance();

const defList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    field: null,
    label: null,
    width: null,
    type: null,
    scheme: null,
    scope: null,
  },
  rules: {
    field: [
      { required: true, message: "数据库字段/表单字段不能为空", trigger: "blur" }
    ],
    label: [
      { required: true, message: "字段名/表单字段名不能为空", trigger: "blur" }
    ],
    width: [
      { required: true, message: "字段宽度不能为空", trigger: "blur" }
    ],
    type: [
      { required: true, message: "字段组件类型不能为空", trigger: "change" }
    ],
    scheme: [
      { required: true, message: "字段定义不能为空", trigger: "blur" }
    ],
    createBy: [
      { required: true, message: "创建人不能为空", trigger: "blur" }
    ],
    createTime: [
      { required: true, message: "创建时间不能为空", trigger: "blur" }
    ]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询流程字段定义列表 */
function getList() {
  loading.value = true;
  listDef(queryParams.value).then(response => {
    defList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    field: null,
    label: null,
    remark: null,
    width: null,
    type: null,
    scheme: null,
    scope: null,
    updateBy: null,
    updateTime: null,
    createBy: null,
    createTime: null
  };
  proxy.resetForm("defRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selectedRowKeys) {
  ids.value = selectedRowKeys;
  single.value = selectedRowKeys.length !== 1;
  multiple.value = !selectedRowKeys.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加流程字段定义";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _id = row.id || ids.value;
  getDef(_id).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改流程字段定义";
  });
}

/** 提交按钮 */
function submitForm() {
  defRef.value.validate().then(() => {
    if (form.value.id) {
      updateDef(form.value).then(() => {
        message.success("修改成功");
        open.value = false;
        getList();
      });
    } else {
      addDef(form.value).then(() => {
        message.success("新增成功");
        open.value = false;
        getList();
      });
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  Modal.confirm({
    title: '确认',
    content: `是否确认删除流程字段定义编号为"${_ids}"的数据项？`,
    onOk() {
      return delDef(_ids).then(() => {
        getList();
        message.success("删除成功");
      });
    }
  });
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('flowable/def/export', {
    ...queryParams.value
  }, `def_${new Date().getTime()}.xlsx`);
}

const defRef = ref(null);

getList();
</script>

<style scoped>
.mb8 {
  margin-bottom: 8px;
}
</style>
